<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.bigbox{
				/* 设置为弹性布局flex */
				display: flex;
				/* 决定主轴方向:
				 1.row:默认值,水平方向,从左往右
				 2.row-reverse: 从右往左
				 3.column:垂直，从上往下
				 4.column-reverse:从下往上
				  */
				/* flex-direction:column-reverse; */
				/*  决定主轴换行
				 1.nowarp:不换行，默认值
				 2.warp:换行
				 3.warp-reverse:换行并且反转
				 */
				/* flex-wrap: wrap-reverse; */
				/* 复合写法 */
				/* 项目在主轴的排列:justify-content
				flex-strat:
				flex-end:
				center:
				space-between:
				space-arround: */
				justify-content: flex-start;
				flex-wrap: row wrap;
				width: 1300px;
				height: 600px;
				margin: auto;
				border: 1px solid black;
			}
			.bigbox div{
				width: 200px;
				height: 200px;
				font-size: 34px;
				border: 1px solid red;
				text-align: center;
				line-height: 200px;
			}
		</style>
	</head>
	<body>
		<div class="bigbox">
			<div class="div">1</div>
			<div class="div">2</div>
			<div class="div">3</div>
			<div class="div">4</div>
			<div class="div">5</div>
			<div class="div">6</div>
		</div>
	</body>
</html>
